<!--登录接口-->
<template>
  <div class="loginConatiner">
    <div class="fixedTop">
      <div class="topheader">
        <div class="left"></div>
        <div class="center"></div>
        <div class="right"></div>
      </div>
    </div>
    <div class="login_content">
      <div class="login_content_left"></div>
      <div class="login_content_right">
        <p class="loginp">
          <img src="../../static/image/login_user.png" alt />
          <input type="text" v-model="ruleForm.username" placeholder="用户名" class="userinput" />
        </p>
        <p class="loginp">
          <img src="../../static/image/login_pwd.png" alt />
          <input type="password" v-model="ruleForm.password" placeholder="密码" class="userinput" />
        </p>
        <p class="loginrem">
          <el-checkbox v-model="remberpwdchecked">记住密码</el-checkbox>
          <span>忘记密码?</span>
        </p>
        <button @click="submitForm" class="loginbut">登 录</button>
      </div>
    </div>
    <p class="fotter">Copyright©2010-2020 版权所有：湖南华辰智通科技有限公司</p>
  </div>
</template>
<script>
import { mapState, mapMutations } from "vuex"; //先导入vuex的方法
export default {
  computed: {
    ...mapState({
      rember: state => state.remberpwdchecked
    })
  },
  data() {
    return {
      ruleForm: {
        username: "",
        password: ""
      },
      remberpwdchecked: false
    };
  },
  mounted() {
    this.remberpwdchecked = this.rember;
    //console.log("记住密码选型", this.remberpwdchecked);
    this.getCookie();
    if (this.remberpwdchecked == false) {
      this.ruleForm.password = "";
      this.ruleForm.username = "";
    }
  },
  methods: {
    ...mapMutations(["changeLogin", "changeremberpwdchecked", "logine"]),
    //存储记住密码的复选框值
    changechecked() {
      this.changeremberpwdchecked({
        remberpwdchecked: this.remberpwdchecked
      });
    },
    submitForm() {
      var that = this;

      if (that.ruleForm.username.length == 0) {
        this.$message.error("用户名不能为空");

        return false;
      }
      if (that.ruleForm.password.length == 0) {
        this.$message.error("密码不能为空");

        return false;
      }

      this.params = {
        username: this.ruleForm.username,
        password: this.ruleForm.password,
        login_type: 0
      };
      this.$http
        .get(`${this.$basePath}?service=App.Account.LoginToken`, {
          params: this.params
        })
        .then(res => {
          if (res.ret == 200) {
            //清空
            this.logine();
            //记住密码
            if (that.remberpwdchecked) {
              // console.log("checked == true");
              //传入账号名，密码，和保存天数3个参数
              that.setCookie(res.data.account.username, this.password, 7);
            } else {
              //console.log("清空Cookie");
              //清空Cookie
              that.clearCookie();
            }
            // 将用户token保存到vuex中
            this.changeLogin({
              Authorization: res.data.token,
              AuthorizationUsername: res.data.account.username,
              AuthorizationPassword: this.password,
              userData: res.data.user
            });
            this.$router.push({
              //核心语句
              path: "/home" //跳转的路径
            });
            //console.log("登录数据", res);
          } else {
            // this.errortitle = res.msg;
            // this.errorshow = true;
            this.$message.error(res.msg);
          }
        });
    },
    //设置cookie
    setCookie(c_name, c_pwd, exdays) {
      var exdate = new Date(); //获取时间
      exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdays); //保存的天数
      //字符串拼接cookie
      window.document.cookie =
        "userName" + "=" + c_name + ";path=/;expires=" + exdate.toGMTString();
      window.document.cookie =
        "userPwd" + "=" + c_pwd + ";path=/;expires=" + exdate.toGMTString();
    },
    //读取cookie
    getCookie: function() {
      if (document.cookie.length > 0) {
        var arr = document.cookie.split("; "); //这里显示的格式需要切割一下自己可输出看下
        for (var i = 0; i < arr.length; i++) {
          var arr2 = arr[i].split("="); //再次切割
          //判断查找相对应的值
          if (arr2[0] == "userName") {
            this.username = arr2[1]; //保存到保存数据的地方
          } else if (arr2[0] == "userPwd") {
            this.password = arr2[1];
          }
        }
      }
    },
    //清除cookie
    clearCookie: function() {
      this.setCookie("", "", -1); //修改2值都为空，天数为负1天就好了
    }
  }
};
</script>
<style lang="less" scoped>
.loginConatiner {
  width: 100%;
  height: 100vh;
  background: url(../../static/image/login_bg.png) no-repeat;
  background-size: 100% 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  .fixedTop {
    width: 100%;
    height: 60px;
    position: fixed;
    top: 0;

    .topheader {
      width: 100%;
      height: 60px;
      display: flex;
      flex-direction: row;
      .center {
        width: 780px;
        text-align: center;
        background: #ccc;
        background: url(../../static/image/header_center.png) no-repeat;
        background-size: 100% 100%;
      }
      .left {
        background: url(../../static/image/header_left.png) no-repeat;
        background-size: 100% 100%;
        flex-grow: 1;
      }
      .right {
        /*flex-grow 属性用于设置或检索弹性盒的扩展比率。*/
        background: url(../../static/image/header_right.png) no-repeat;
        background-size: 100% 100%;
        flex-grow: 1;
      }
    }
  }
  .login_content {
    // width: 53%;
    // height: 51%;
    width: 1018px;
    height: 555px;
    background: url(../../static/image/login_content.png) no-repeat;
    background-size: 100% 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .login_content_left {
      width: 50%;
    }
    .login_content_right {
      width: 50%;
      padding-right: 80px;
      padding-left: 47px;

      box-sizing: border-box;

      .loginp {
        width: 380px;
        height: 56px;
        padding: 0 1px 2px;
        background: rgba(18, 211, 252, 0);
        border: 1px solid rgba(20, 137, 204, 1);
        box-sizing: border-box;
        margin-bottom: 25px;
        img {
          width: 59px;
          height: 54px;

          vertical-align: middle;
        }
        .userinput {
          font-size: 16px;
          color: rgba(23, 161, 229, 1);
          background: transparent;
          height: 100%;
          border: none;
          outline: none;
          padding-left: 5px;
        }
        .userinput::-webkit-input-placeholder {
          /* WebKit browsers */
          color: rgba(23, 161, 229, 1);
        }
      }
      .loginbut {
        width: 380px;
        height: 56px;
        background: rgba(26, 220, 255, 1);
        outline: none;
        border: none;
        font-size: 22px;
        color: #0a3d75;
        line-height: 56px;
      }
      .loginrem {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 30px;
        /deep/.el-checkbox__inner {
          background: transparent;
          border-color: #1489cc;
        }
        /deep/.el-checkbox {
          color: #1ad1ff;
        }
        /deep/.el-checkbox__input.is-checked + .el-checkbox__label {
          color: #1ad1ff;
        }
        span {
          font-size: 14px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: rgba(26, 209, 255, 1);
        }
      }
    }
  }
  .fotter {
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: rgba(21, 156, 176, 1);
    position: fixed;
    bottom: 34px;
  }
}
</style>